<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通知 - 影享圈</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #000;
            color: white;
            height: 100vh;
            padding-top: 44px; /* Status bar height */
        }
        .bg-netflix {
            background-color: #E50914;
        }
        .text-netflix {
            color: #E50914;
        }
        .notification-item {
            border-bottom: 1px solid #333;
            padding: 16px 0;
        }
        .notification-item:last-child {
            border-bottom: none;
        }
        .notification-tabs {
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .notification-tabs::-webkit-scrollbar {
            display: none;
        }
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.9);
            height: 83px;
            border-top: 1px solid #333;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding-bottom: env(safe-area-inset-bottom);
        }
        .bottom-nav a {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            font-size: 10px;
            text-decoration: none;
        }
        .bottom-nav a i {
            font-size: 22px;
            margin-bottom: 4px;
        }
        .bottom-nav a.active {
            color: white;
        }
    </style>
</head>
<body>
    <div class="relative min-h-screen pb-20">
        <!-- 顶部导航 -->
        <div class="fixed top-0 left-0 right-0 z-50 px-4 pt-12 pb-4 flex items-center justify-between bg-black">
            <div class="flex items-center">
                <span class="text-xl font-bold">通知中心</span>
            </div>
            <div class="flex items-center space-x-4">
                <button class="text-sm text-gray-400">全部已读</button>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="pt-24 pb-24">
            <!-- 分类标签 -->
            <div class="notification-tabs flex px-4 mb-6 space-x-4">
                <a href="#" class="text-white px-3 py-1 rounded-full bg-netflix whitespace-nowrap">全部</a>
                <a href="#" class="text-white px-3 py-1 rounded-full border border-gray-700 whitespace-nowrap">互动</a>
                <a href="#" class="text-white px-3 py-1 rounded-full border border-gray-700 whitespace-nowrap">系统</a>
                <a href="#" class="text-white px-3 py-1 rounded-full border border-gray-700 whitespace-nowrap">活动</a>
                <a href="#" class="text-white px-3 py-1 rounded-full border border-gray-700 whitespace-nowrap">私信</a>
            </div>

            <!-- 通知列表 -->
            <div class="px-4 space-y-0">
                <!-- 今天 -->
                <h3 class="text-sm text-gray-500 mb-2">今天</h3>
                
                <div class="notification-item">
                    <div class="flex">
                        <div class="relative mr-3">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="小红" class="w-10 h-10 rounded-full">
                            <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-netflix rounded-full flex items-center justify-center text-white text-xs">
                                <i class="fas fa-heart"></i>
                            </div>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm mb-1"><span class="font-medium">小红</span> 赞了你的评论：<span class="text-gray-400">"流浪地球2真的太精彩了，特效做得非常棒..."</span></p>
                            <p class="text-xs text-gray-500">20分钟前</p>
                        </div>
                        <div class="w-12 h-12 rounded overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1626814026160-2237a95fc5a0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="流浪地球2" class="w-full h-full object-cover">
                        </div>
                    </div>
                </div>
                
                <div class="notification-item">
                    <div class="flex">
                        <div class="relative mr-3">
                            <div class="w-10 h-10 rounded-full bg-netflix flex items-center justify-center">
                                <i class="fas fa-bell text-white"></i>
                            </div>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm mb-1"><span class="font-medium">系统通知</span> 《三体》第二季已更新，快去观看吧！</p>
                            <p class="text-xs text-gray-500">1小时前</p>
                        </div>
                        <div class="w-12 h-12 rounded overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1025&q=80" alt="三体" class="w-full h-full object-cover">
                        </div>
                    </div>
                </div>
                
                <div class="notification-item">
                    <div class="flex">
                        <div class="relative mr-3">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="阿明" class="w-10 h-10 rounded-full">
                            <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs">
                                <i class="fas fa-user-plus"></i>
                            </div>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm mb-1"><span class="font-medium">阿明</span> 开始关注你</p>
                            <p class="text-xs text-gray-500">2小时前</p>
                        </div>
                        <button class="px-4 py-1 bg-netflix rounded-full text-white text-sm">
                            回关
                        </button>
                    </div>
                </div>

                <!-- 昨天 -->
                <h3 class="text-sm text-gray-500 mb-2 mt-4">昨天</h3>
                
                <div class="notification-item">
                    <div class="flex">
                        <div class="relative mr-3">
                            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="小美" class="w-10 h-10 rounded-full">
                            <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center text-white text-xs">
                                <i class="fas fa-comment"></i>
                            </div>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm mb-1"><span class="font-medium">小美</span> 评论了你的动态：<span class="text-gray-400">"我也很喜欢这部电影，情感表达非常到位！"</span></p>
                            <p class="text-xs text-gray-500">昨天 22:45</p>
                        </div>
                        <div class="w-12 h-12 rounded overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1533613220915-609f661a6fe1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1964&q=80" alt="满江红" class="w-full h-full object-cover">
                        </div>
                    </div>
                </div>
                
                <div class="notification-item">
                    <div class="flex">
                        <div class="relative mr-3">
                            <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center">
                                <i class="fas fa-gift text-white"></i>
                            </div>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm mb-1"><span class="font-medium">会员福利</span> 恭喜你获得3张免费观影券！</p>
                            <p class="text-xs text-gray-500">昨天 15:30</p>
                        </div>
                        <button class="px-4 py-1 bg-gray-800 rounded-full text-white text-sm">
                            查看
                        </button>
                    </div>
                </div>
                
                <div class="notification-item">
                    <div class="flex">
                        <div class="relative mr-3">
                            <img src="https://randomuser.me/api/portraits/men/86.jpg" alt="大卫" class="w-10 h-10 rounded-full">
                            <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-netflix rounded-full flex items-center justify-center text-white text-xs">
                                <i class="fas fa-share-alt"></i>
                            </div>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm mb-1"><span class="font-medium">大卫</span> 分享了一部影片给你：《长津湖》</p>
                            <p class="text-xs text-gray-500">昨天 10:15</p>
                        </div>
                        <div class="w-12 h-12 rounded overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1611523658822-385aa008324c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1964&q=80" alt="长津湖" class="w-full h-full object-cover">
                        </div>
                    </div>
                </div>

                <!-- 更早 -->
                <h3 class="text-sm text-gray-500 mb-2 mt-4">更早</h3>
                
                <div class="notification-item">
                    <div class="flex">
                        <div class="relative mr-3">
                            <div class="w-10 h-10 rounded-full bg-netflix flex items-center justify-center">
                                <i class="fas fa-film text-white"></i>
                            </div>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm mb-1"><span class="font-medium">影片更新</span> 你收藏的影片《独行月球》有了新的花絮视频</p>
                            <p class="text-xs text-gray-500">3天前</p>
                        </div>
                        <div class="w-12 h-12 rounded overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1535016120720-40c646be5580?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="独行月球" class="w-full h-full object-cover">
                        </div>
                    </div>
                </div>
                
                <div class="notification-item">
                    <div class="flex">
                        <div class="relative mr-3">
                            <div class="w-10 h-10 rounded-full bg-yellow-600 flex items-center justify-center">
                                <i class="fas fa-crown text-white"></i>
                            </div>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm mb-1"><span class="font-medium">会员升级</span> 恭喜你成为黄金会员！享受更多专属特权</p>
                            <p class="text-xs text-gray-500">1周前</p>
                        </div>
                        <button class="px-4 py-1 bg-gray-800 rounded-full text-white text-sm">
                            查看
                        </button>
                    </div>
                </div>
            </div>

            <!-- 全部加载完毕 -->
            <div class="text-center py-6">
                <p class="text-gray-500 text-sm">- 全部加载完毕 -</p>
            </div>
        </div>

        <!-- 底部导航 -->
        <div class="bottom-nav">
            <a href="#">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="#">
                <i class="fas fa-compass"></i>
                <span>探索</span>
            </a>
            <a href="#">
                <i class="fas fa-users"></i>
                <span>社交</span>
            </a>
            <a href="#">
                <i class="fas fa-download"></i>
                <span>下载</span>
            </a>
            <a href="#">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </div>
    </div>
</body>
</html>
